<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/base.css">
    <link rel="stylesheet" href="../static/font/iconfont.css">
    <script src="../renderlib/vue/vue.js"></script>
    <script src="../renderlib/vue/components/btn.js"></script>
    <script src="../renderlib/vue/components/dialog.js"></script>
    <script src="../renderlib/vue/components/system-title.js"></script>
    <script src="../static/font/iconfont.js"></script>
    <script src="../renderlib/sass/render.js"></script>
    
    <script type="text/javascript">
    renderScssWrite(`<style type="text/scss">
        html, body {
            margin:0;
            padding: 0;
            width:100%;
            height: 100%;
        }
        
        .frame {
            width:100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            background: linear-gradient(45deg, #b4b4b4, #f1f1f1);
            font-size: 13px;
        }
        
        .content {
            width:100%;
            height: 100%;
            position: relative;
            display: flex;
            justify-content: center;
            padding-top:30px;
            
            .logo-wrap {
                display: flex;
                
                .logo {
                    width:80px;
                    height:80px;
                }
                
                .name-wrap {
                    display: flex;
                    flex-direction: column;
                    padding: 5px;
                    
                    .app-name {
                        font-size:18px;
                        
                        font-weight: bold;
                    }
                    
                    .description {
                        color:gray;
                        font-size:13px;
                    }
                }
            }
            
            .version {
                
            }
            
            .row {
                padding-top: 8px;
                text-align: center;
            }
            
            .about-text {
                color: #3c3c3c;
            }
        }
        
        .loading {
            width: 100%;
            background: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            overflow: hidden;
            
            .loading-img {
                width:15px;
                animation:rotate 1.5s infinite linear;
            }
            
            .loading-text {
                padding-left:3px;
                font-size:12px;
            }
        }

/*.loading.show {*/
/*    height:30px;*/
/*}*/

        @keyframes rotate {
            from {transform:rotate(0deg);}
            to {transform:rotate(360deg);}
        }


`);
    </script>
</head>
<body>
    <div class="frame" id="root">
        <system-title :hideminbtn="true" :hidemaxbtn="true" @beforeclose="close"></system-title>
        <div class="content">
            <div>
                <div class="logo-wrap">
                    <img class="logo" :src="getAppIcon()" alt="">
                    <div class="name-wrap">
                        <span class="app-name">{{package.productName}}</span>
                        <span class="description">{{package.description}}</span>
                        <span class="description">作者: <b>{{package.author}}</b></span>
                    </div>
                </div>
                <div class="version row">
                    当前版本: {{package.version}} <btn size="s" theme="link" @click="openChangelogWindow">更新日志</btn>
                </div>
                <div class="about-text row">此程序基于 <btn theme="link" size="s" @click="openUrl('https://www.electronjs.org/')">Electron</btn> 项目</div>
                <div class="row">
                    <btn @click="checkUpdate()" :disabled="true" v-if="isLatest">
                        <span class="loading-text">已经是最新版本</span>
                    </btn>
                    <btn @click="checkUpdate()" :disabled="updating" v-else>
                        <div class="loading">
                            <img class="loading-img" src="../static/img/loading.png" v-if="updating">
                            <span class="loading-text">{{btnText}}</span>
                        </div>
                    </btn>
                </div>
                
            </div>
        </div>
    </div>

<script src="./js/about.js"></script>
</body>
</html>
